<template>
  <uni-popup
    type="bottom"
    class="select-goods-information-popup"
    ref="popup"
    :mask-click="false"
  >
    <view class="header f jc-sb">
      <text>选择物品信息</text>
      <uni-icons type="close" size="30" @click="closePopup"></uni-icons>
    </view>
    <view class="body f f1 fd-col">
      <view class="goods-type f fd-col">
        <view class="header p0"
          ><text>物品类型</text
          ><text
            style="
              padding: 8rpx;
              bxo-sizing: border-box;
              font-size: 20rpx;
              background-color: #f9eeee;
              border-radius: 10rpx;
              color: #e79192;
              margin-left: 20rpx;
            "
            >必填</text
          ></view
        >
        <view class="body p0 f fd-row f1 h0">
          <uni-data-checkbox
            mode="tag"
            v-model="radioValue"
            :localdata="radioRange"
            @change="radioChange"
          ></uni-data-checkbox>
        </view>
      </view>
      <view class="freight-estimation">
        <view class="header p0">运费估算</view>
        <view class="body p0">
          <view class="f jc-sb ai-c"
            ><text>设置重量 (kg)</text
            ><uni-number-box v-model="vModelValue" :min="1"
          /></view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import { ref } from "vue";
export default {
  name: "select-goods-information-popup",
  emits: ["getSelectGoodsInformation"],
  setup(prop, { emit }) {
    const popup = ref(null);
    const radioValue = ref(0);
    const radioRange = ref([
      { value: 0, text: "日用品" },
      { value: 1, text: "食品" },
      { value: 2, text: "文件" },
      { value: 3, text: "衣物" },
      { value: 4, text: "数码产品" },
      { value: 5, text: "其他" },
    ]);
    const vModelValue = ref(1);
    const selectGoodsInformationStr = ref("");
    const radioChange = (data) => {
      radioValue.value = data.detail.value;
    };
    const openPopup = () => {
      popup.value.open();
    };
    const closePopup = () => {
      selectGoodsInformationStr.value =
        radioRange.value.find((item) => item.value === radioValue.value).text +
        " / " +
        vModelValue.value +
        "kg";
      emit(
        "getSelectGoodsInformation",
        selectGoodsInformationStr.value,
        vModelValue.value
      );
      popup.value.close();
    };
    return {
      popup,
      radioValue,
      radioRange,
      vModelValue,
      radioChange,
      openPopup,
      closePopup,
    };
  },
};
</script>
<style lang='scss' scoped>
.select-goods-information-popup {
  width: 100%;
  ::v-deep uni-view[name="content"] {
    display: flex;
    flex-direction: column;
    padding-bottom: 96rpx !important;
    width: 100%;
    height: 800rpx;
    box-sizing: border-box;
    background: #f1f6fd !important;
    border-radius: 40rpx 40rpx 0 0;
    overflow: hidden;
    .uni-popup__wrapper.bottom {
      display: flex;
      flex: 1;
      flex-direction: column;
      .header {
        padding: 30rpx;
        box-sizing: border-box;
        background-color: #fff;
      }
    }
  }
  .body {
    margin-top: 20rpx;
    .goods-type {
      margin-bottom: 20rpx;
      padding: 20rpx;
      width: 100%;
      height: 300rpx;
      box-sizing: border-box;
      background-color: #fff;
      ::v-deep .uni-data-checklist {
        display: flex;
        flex-direction: column;
        flex: 1;
        height: 100%;
        .checklist-group {
          flex: 1;
          height: 0;
          .uni-label-pointer {
            width: 31%;
            height: 60rpx;
            box-sizing: border-box;
            background-color: #fff !important;
            .checklist-content {
              justify-content: center;
            }
            &.is-checked {
              border-color: #3f82c6 !important;
              background-color: #eff8ff !important;
              .checklist-text {
                color: #3f82c6 !important;
              }
            }
            &:nth-child(3n) {
              margin-right: 0;
            }
          }
        }
      }
    }
    .freight-estimation {
      padding: 20rpx;
      width: 100%;
      height: 200rpx;
      box-sizing: border-box;
      background-color: #fff;
      .body {
        margin-top: 20rpx;
        ::v-deep .uni-numbox {
          height: 60rpx;
          width: 300rpx;
          border: 2rpx solid #999;
          .uni-numbox-btns {
            flex: 1;
            background-color: #f1f6fb !important;
            .uni-numbox--text {
              font-size: 60rpx;
            }
          }
          .uni-numbox__value {
            flex: 2;
            height: 60rpx;
            background-color: #fff !important;
            .uni-input-input {
              font-size: 40rpx;
            }
          }
        }
      }
    }
  }
}
</style>